<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>Winter Login Form a Simple Login form Responsive Widget :: w3layouts</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/style.css">

	<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">

	<script src="http://localhost:8080/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div class="agile-login">
		<h1>个人博客</h1>
		<div class="wrapper">
			<h2>找回密码</h2>
			<div class="w3ls-form">
				<form action="/findPasswordServlet" method="post" id="accountForm">
					<label>请输入您的账号</label>
					<input type="text" name="account" required id="account" autofocus/>
				</form>
				<form action="${pageContext.request.contextPath}/findPasswordServlet" method="post" id="message">
					<label>密保问题</label>
					<input type="text" name="question" disabled/>
					<label>密保答案</label>
					<input type="text" name="answer" placeholder="请输入您的答案" required  id="answer"/>
					<label>您的密码为</label>
					<input type="text" name="password" disabled/>
					<input type="button" value="确认" id="submit"/>
					<a href="http://localhost:8080/login.jsp" style="display:initial;"><input type="button" value="返回"/></a>
				</form>
			</div>
			
			<div class="agile-icons">
				<a href="#"><span class="fa fa-twitter" aria-hidden="true"></span></a>
				<a href="#"><span class="fa fa-facebook"></span></a>
				<a href="#"><span class="fa fa-pinterest-p"></span></a>
			</div>
		</div>
		<br>
	</div>.
	<script>

			let accountText = $("#account");				//获取账户输入框
			let answerText = $("#answer");					//获取答案户输入框
			let submit = $("#submit");						//获取确认按钮
			let questionText = $("input[name='question']");	//获取问题输入框
			let passwordText = $("input[name='password']");	//获取密码输入框

			//账户输入框失焦时执行
			accountText.blur(function () {
				//当其内文字长度大于零且不为空格时执行
				if(accountText.val().length > 0 && accountText.val() != " "){
					//Ajax异步请求后台数据
					$.ajax({
						url:"/findPasswordServlet", //请求路径
						type:"POST", //请求方式
						data:{"account":accountText.val()}, //请求参数
						success:function (result) {
							let user = jQuery.parseJSON(result);
							write(questionText,user.question);
							submit.click(function () {
								if(answerText.val() == user.answer){
									write(passwordText,user.password);
								}
							})
						},//响应成功后的回调函数
						error:function () {
							alert("出错惹!")
						},//表示如果请求响应出现错误，会执行的回调函数
						dataType:"text"//设置接受到的响应数据的格式
										/*
											dataType值如果为'json'，jquery就会把后端返回的字符串尝试通过JSON.parse()尝试解析为js对象。
											dataType值如果为'text'，结果弹出框直接显示后台返回的json字符串。
											dataType值如果为'html'，结果弹出框直接显示后台返回的json字符串。
										 */
					})
				}
			});
			//向输入框中写数据的方法
			function write(el,str) {
				el.val(str);
			}
	</script>
</body>

</html>